<template>
	<view class="body">
		<!-- 轮播 -->
		<view class="">
			<input class="header-input" type="text" placeholder="搜索你想要的的内容" name="" id="">
		</view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 100%; ">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="background"
						:style="{background: `linear-gradient(0deg, #FFFFFF 0%, ${item.background} 100%)`}">
						<image :src="item.imageUrl" mode="" class="img"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 按钮 -->
		<view class="labe-view">
			<ul class="labe-ul" v-for="(item,index) in labellist" :key="index">
				<li>{{item.name}}</li>
			</ul>
		</view>

		<!-- 热门推荐 -->
		<view class="hot-view">
			<text class="hot-text">热门推荐</text>
			<text class="hot-text1">全部 > </text>
		</view>
		<!--热门推荐下面横向滚动 -->
		<view class="transverse" v-for="(item,index) in hotcourse" :key="index">
			<view class="transverse1">
				<image :src="item.mainImage" mode="" class="img1"></image>
			</view>
			<view class="transverse2">
				<text>{{item.title}}</text>
				<p class="name">
					<image :src="item.userImage" mode="" class="img2"></image>{{item.nickName}}
				</p>
				<view class="free">
					<text style="color: red;">免费</text>
					<text>{{item.commTotal}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		banner,
		label, 
		Courselist
	} from "@/common/interface.js"
	export default {
		data() {
			return {
				bannerList: [],
				labellist: [],
				hotcourse: []
			}
		},

		onLoad() {
			this.getdata()
			this.Labelist()
			this.Hotcourse()
		},
		methods: {
			async getdata() {
				let {
					data: res
				} = await banner()
				console.log(res);
				this.bannerList = res.data
			},
			async Labelist() {
				let {
					data: res
				} = await label()
				console.log(res, '111');
				this.labellist = res.data
			},
			async Hotcourse() {
				let {
					data: res
				} = await Courselist()
				console.log(res, '222');
				this.hotcourse = res.data.records
			},
		}
	}
</script>

<style>
	.body {
		overflow: hidden;
	}

	li {
		list-style: none;
	}

	.header {
		margin-top: -100rpx;
		width: 100%;
		height: 550rpx;
	}

	.background {
		width: 100%;
		height: 100%;
	}

	.background image {
		position: absolute;
		bottom: 0;
		top: 150rpx;
		left: 50%;
		margin-left: -300rpx;
		width: 600rpx;
		height: 400rpx;
		border-radius: 30rpx;
	}

	.header-input {
		position: relative;
		z-index: 999;
		top: 30rpx;
		width: 90%;
		height: 70rpx;
		margin-left: 5%;
		text-align: center;
		border-radius: 50rpx;
		background-color: #f0f1f2;
	}

	.labe-view {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.labe-ul {
		width: 20%;
		background-color: #fefbfa;
		border-radius: 15rpx;
		line-height: 90rpx;
		height: 90rpx;
		margin-top: 10rpx;
	}

	.labe-ul li {
		text-align: center;
	}

	.hot-view {
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 5%;
		display: flex;
		justify-content: space-between;
	}

	.hot-text {
		font-size: 50rpx;
	}

	.hot-text1 {
		font-size: 40rpx;
		color: #959da5;
	}

	.Hot {
		width: 750rpx;
		height: 50rpx;
		margin-top: 200rpx;
		display: flex;
		justify-content: space-between;
	}

	.transverse {
		width: 750rpx;
		height: 200rpx;

		display: flex;
		margin: 10rpx;
	}

	.transverse1 {
		width: 275rpx;
		height: 200rpx;
		margin-left: 10rpx;

	}

	.img1 {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.img2 {
		width: 50rpx;
		height: 50rpx;

	}

/* 	.free {
		margin-top: 15rpx;
		width: 80%;
		display: flex;
		justify-content: space-between;
	} */
</style>
